<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
 <h:head>
 <title>Listar Productos</title>
 </h:head>
 <h:body>
 <p:layout fullPage="true">  
 	<p:layoutUnit position="west" size="220" header="Agregar Producto" resizable="true" closable="true" collapsible="true">  
       <ui:include src="formAgregarProducto.xhtml" />
    </p:layoutUnit>
    <p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" effect="drop">  
        <h:outputText value="Aca irá el contenido del carrito" />  
    </p:layoutUnit>  
 	<p:layoutUnit position="center"> 
	<h:form id="form">
		<p:growl id="messages" showDetail="true"/>
		<p:dataTable value="#{mBProducto.listaProductos}" var="producto" id="listaProductos" name="listaProductos" editable="true">
			<f:facet name="header">  
            	Lista de productos  
        	</f:facet>
        	<p:ajax event="rowEdit" listener="#{mBProducto.editarProducto}" update=":form:messages" />  
        	<p:ajax event="rowEditCancel" listener="#{mbProducto.mensajeNoEditar}" update=":form:messages" />  
            <p:column headerText="ID" style="width:10%">
            	<p:cellEditor>
        			<f:facet name="output">
           				<h:outputText value="#{producto.id}" />
        			</f:facet>
        			<f:facet name="input">
           				<p:inputText value="#{producto.id}" style="width:100%"/>
        			</f:facet>
        		</p:cellEditor>
    		</p:column>
    		<p:column headerText="Nombre" style="width:20%">
            	<p:cellEditor>
        			<f:facet name="output">
           				<h:outputText value="#{producto.nombre}" />
        			</f:facet>
        			<f:facet name="input">
           				<p:inputText value="#{producto.nombre}" style="width:100%"/>
        			</f:facet>
        		</p:cellEditor>
    		</p:column>
			<p:column headerText="Descripcion" style="width:30%">
            	<p:cellEditor>
        			<f:facet name="output">
           				<h:outputText value="#{producto.descripcion}" />
        			</f:facet>
        			<f:facet name="input">
           				<p:inputText value="#{producto.descripcion}" style="width:100%"/>
        			</f:facet>
        		</p:cellEditor>
    		</p:column>
			<p:column headerText="Categoría" style="width:18%">
            	<p:cellEditor>
        			<f:facet name="output">
           				<h:outputText value="#{producto.categoria}" />
        			</f:facet>
        			<f:facet name="input">
           				<p:inputText value="#{producto.categoria}" style="width:100%"/>
        			</f:facet>
        		</p:cellEditor>
    		</p:column>
    		<p:column headerText="Stock" style="width:5%">
            	<p:cellEditor>
        			<f:facet name="output">
           				<h:outputText value="#{producto.stock}" />
        			</f:facet>
        			<f:facet name="input">
           				<p:inputText value="#{producto.stock}" style="width:100%"/>
        			</f:facet>
        		</p:cellEditor>
    		</p:column>
    		<p:column headerText="Precio" style="width:10%">
            	<p:cellEditor>
        			<f:facet name="output">
           				<h:outputText value="#{producto.precio}" />
        			</f:facet>
        			<f:facet name="input">
           				<p:inputText value="#{producto.precio}" style="width:100%"/>
        			</f:facet>
        		</p:cellEditor>
    		</p:column>
    		<p:column headerText="Editar" style="width:8%">  
            	<p:rowEditor />  
        	</p:column>  
        	<p:column headerText="Eliminar" style="width:8%">
    			<p:commandButton icon="ui-icon-close" title="eliminar"
    			 actionListener="#{mBProducto.eliminarProducto(producto)}" update="listaProductos" />
   			</p:column>
   			<p:column headerText="Carro" style="width:12%">
    			<p:commandButton id="showDialogButton" type="button" value="Agregar al carro" onclick="PF('dlg').show()" /> 	
    		</p:column>
            </p:dataTable>
    	</h:form>
    	</p:layoutUnit>  
     </p:layout>   
     <p:dialog header="Ingrese la cantidad de productos a agregar al carrito" widgetVar="dlg" resizable="false">  
    	<h:form id="carrito">  
  
        <h:panelGrid columns="2" style="margin-bottom:10px">  
            <h:outputText id="descripcion" value="#{producto.descripcion}" />  
        </h:panelGrid>  
  
        <p:commandButton id="submitButton" value="Agregar al carrito" update=":display" oncomplete="PF('dlg').hide();"/>  
              
    	</h:form>  
    	<p:outputPanel id="display" style="display:block;margin-top:10px;">  
    		<h:outputText id="name" value="Producto agregado al carrito"/>  
		</p:outputPanel>  
	</p:dialog>        
    </h:body>
</html>